import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router';

interface CategoryItem {
  id: string;
  name: string;
  icon: keyof typeof Ionicons.glyphMap;
  color: string;
}

const categories: CategoryItem[] = [
  { id: '1', name: '手机数码', icon: 'phone-portrait', color: 'bg-blue-500' },
  { id: '2', name: '服装', icon: 'shirt', color: 'bg-pink-500' },
  { id: '3', name: '美食', icon: 'restaurant', color: 'bg-orange-500' },
  { id: '4', name: '家居', icon: 'home', color: 'bg-green-500' },
  { id: '5', name: '母婴', icon: 'happy', color: 'bg-purple-500' },
  { id: '6', name: '美妆', icon: 'color-palette', color: 'bg-red-500' },
  { id: '7', name: '运动', icon: 'basketball', color: 'bg-yellow-500' },
  { id: '8', name: '图书', icon: 'book', color: 'bg-indigo-500' },
];

export default function QuickCategories() {
  return (
    <ScrollView 
      horizontal 
      showsHorizontalScrollIndicator={false}
      className="py-4"
    >
      {categories.map((category) => (
        <TouchableOpacity
          key={category.id}
          className="items-center mx-3 first:ml-4 last:mr-4"
          onPress={() => router.push({
            pathname: '/(tabs)/category',
            params: { id: category.id }
          })}
        >
          <View className={`w-12 h-12 rounded-full ${category.color} items-center justify-center mb-1`}>
            <Ionicons name={category.icon} size={24} color="white" />
          </View>
          <Text className="text-xs text-gray-600">{category.name}</Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  );
} 